<template>
	<view class="">
		<u-list>
			<u-list-item v-for="(item, index) in mesList" :key="index">
				<u-cell :title="item.name" @click="goMessage(item)">
					<template #icon>
						<view class="icon">
							<u-avatar shape="square" size="35" src="/static/bell.png" customStyle="margin: -3px 0px -px 5px"></u-avatar>
							<up-badge :type="type" max="99" :absolute="true" :offset="[-8,-10]" :value="item.num"></up-badge>
						</view>
					</template>
				</u-cell>
			</u-list-item>
		</u-list>
	</view>
</template>
<script setup>
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		computed,
		ref
	} from "vue";
	import {
		getMesType
	} from '@/api/message.js'
	import {
		setMessageBadge
	} from '@/hooks/com.js'
	const type = "error"
	let mesList = ref([])
	const getMesList = async () => {
		try {
			const {
				data
			} = await getMesType()
			mesList.value = data
		} catch (e) {
			//TODO handle the exception
		}
	}
	// 跳转详情页
	const goMessage = (item) => {
		// if (!item.num) {
		// 	uni.showModal({
		// 		content: '暂无消息',
		// 		showCancel: false
		// 	})
		// 	return
		// }
		uni.navigateTo({
			url: '/pages/message/detail?type=' + item.type
		})
	}
	onShow(() => {
		getMesList()
		setMessageBadge()
	})
</script>
<style lang="scss" scoped>
	:deep(.u-cell__title-text) {
		padding-left: 20rpx;
		font-weight: bold;
	}

	.icon {
		position: relative;
	}
</style>